<template>
  <div class="infinite-list-wrapper" style="overflow: auto; height: 370px">
    <ul
      class="list"
      v-infinite-scroll="load"
      infinite-scroll-distance="94"
      infinite-scroll-disabled="disabled"
    >
      <li v-for="(item, index) in moves" :key="index" @click="btn(item)">
        <img :src="item.poster" />
        <dl>
          <dt>
            {{ item.name }}<span>{{ item.item.name }}</span>
          </dt>
          <dd>
            主演：<span v-for="(txt, index) in item.actors" :key="index"
              >{{ txt.name }}
            </span>
          </dd>
          <dd>{{ item.nation }} | {{ item.runtime }}分钟</dd>
        </dl>
        <button>购票</button>
      </li>
    </ul>
    <p
      style="
        background: #ededed;
        font-size: 13px;
        height: 70px;
        text-align: center;
        color: #bdc0c5;
        line-height: 70px;
      "
      v-if="loading"
    >
      加载中...
    </p>
    <p
      style="
        background: #ededed;
        font-size: 13px;
        height: 20px;
        text-align: center;
        color: #bdc0c5;
      "
      v-if="noMore"
    >
      - 无更多电影 -
    </p>
  </div>
</template>
<script>
import axios from "@/uitls/request.js";
export default {
  data() {
    return {
      page: {
        num: 0,
        size: 10,
      },
      moves: [],
      loading: false,
      noMore: false,
    };
  },
  created() {
    this.load();
    
  },
  methods: {
    btn(item) {
      if (event.target.nodeName == "BUTTON") {
        this.$router.push(`/film/cinemabuy`);
      } else {
        this.$router.push({ name: "detail", params: { filmId:item.filmId,path:'/film/reying'} });
     }
    },
    load() {
      this.loading = true;
      this.page.num++;
      axios({
        url:
          "gateway?cityId=510100&pageNum=" +
          this.page.num +
          "&pageSize=" +
          this.page.size +
          "&type=1&k=6225073",
        data: {
          xHost: "mall.film-ticket.film.list",
        },
      }).then((res) => {
        if (res.status == 0) {
          this.loading = false;
          this.moves = this.moves.concat(res.data.films);
          if (this.moves.length >= res.data.total) {
            this.moves.length = res.data.total;
            this.noMore = true;
          } else {
            this.noMore = false;
          }
        }
      });
    },
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    },
  },
};
</script>
<style scoped lang="less">
ul {
  overflow: hidden;
   background-color: #fff;
  li {
    width: 6.9rem;
    height: 1.88rem;
    margin: 0.3rem auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 1.32rem;
      height: 1.94rem;
    }
    dl {
      width: 4.18rem;
      height: 1.62rem;
      dt {
        text-align: left;
        height: 0.44rem;
        font-size: 0.32rem;
        color: #191a1b;
        span {
          font-size: 0.18rem;
          color: #fff;
          background-color: #d2d6dc;
          margin-left: 0.14rem;
          padding: 0 0.04rem;
          border-radius: 0.04rem;
          vertical-align: middle;
        }
        margin-bottom: 20px;
      }
      dd {
        height: 0.4rem;
        font-size: 0.26rem;
        color: #797d82;
        text-align: left;
        line-height: 0.4rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    button {
      width: 1rem;
      height: 0.5rem;
      border-radius: 0.04rem;
      border: 1px solid #ff5f16;
      font-size: 0.26rem;
      color: #ff5f16;
      line-height: 0.5rem;
      background-color: #fff;
    }
  }
}
</style>